<template>
  <div class="page-content">
    <art-table
      v-bind="contentConfig"
      v-model:page="pageInfo"
      :tableData="tableData"
      :tableCount="tableCount"
    >
      <!-- 1. header中的插槽 -->
      <template #headerHandler>
        <el-button
          type="primary"
          v-if="isCreate"
          @click="handleCreateClick">
          {{ contentConfig.headerBtn }}
        </el-button>
      </template>

      <!-- 2. 列中的公共插槽 -->
      <template #status="scope">
        <el-button
          plain
          size="small"
          :type="scope.row.enable ? 'success' : 'danger'"
        >
          {{ scope.row.enable ? "启用" : "禁用" }}
        </el-button>
      </template>
      <template #createAt="scope">
        <span>{{ $filters.formatTimer(scope.row.createAt) }}</span>
      </template>
      <template #updateAt="scope">
        <span>{{ $filters.formatTimer(scope.row.updateAt) }}</span>
      </template>

      <!-- 3. 列中的操作 -->
      <template #edit="scope">
        <div class="handle-btns">
          <el-button v-if="isUpdate" type="text" @click="handleEditClick(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-if="isDelete"
            type="text"
            @click="handleDeleteClick(scope.row)"
            >删除</el-button
          >
        </div>
      </template>

      <!-- 4. 页面中的独立插槽 -->
      <template
        v-for="item in otherSlots"
        :key="item.prop"
        #[item.slotName]="scope">
        <slot :name="item.slotName" :row="scope.row"></slot>
      </template>

    </art-table>
  </div>
</template>

<script lang='ts'>
import { defineComponent, computed, ref, watch } from "vue";
import ArtTable from "@/base-ui/table/index";

import { useStore } from "@/store/index";

import { usePermission } from "@/hook/use-permission";

export default defineComponent({
  components: {
    ArtTable,
  },
  props: {
    contentConfig: {
      type: Object,
      required: true,
    },
    pageName: {
      type: String,
      default: "",
    },
  },
  emits: ['newBtnClick', 'editBtnClick'],
  setup(props, { emit }) {
    const store = useStore();

    // 0、获取用户的操作权限
    const isCreate = usePermission(props.pageName, "create");
    const isUpdate = usePermission(props.pageName, "update");
    const isQuery = usePermission(props.pageName, "query");
    const isDelete = usePermission(props.pageName, "delete");

    // 1、双向绑定pageInfo
    const pageInfo = ref({
      currentPage: 1,
      pageSize: 10,
    });

    watch(pageInfo, (newVal) => {
      searchTableClick();
    });

    // 2、搜索页面数据
    const searchTableClick = (queryData?: any): void => {
      if (!isQuery) return;
      store.dispatch("system/getPageTableListAction", {
        pageName: props.pageName,
        queryInfo: {
          offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
          size: pageInfo.value.pageSize,
          ...queryData,
        },
      });
    };

    searchTableClick();

    // 3、vuex中获取表格数据
    const tableData = computed(() =>
      store.getters[`system/pageListData`](props.pageName)
    );
    const tableCount = computed(() =>
      store.getters[`system/pageListCount`](props.pageName)
    );

    // 4、获取其他动态插槽的名称
    const otherSlots = props.contentConfig.propList.filter((item: any) => {
      if (
        item.slotName == "status" ||
        item.slotName == "createAt" ||
        item.slotName == "updateAt" ||
        item.slotName == "edit" ||
        !item.slotName
      ) {
        return false;
      }
      return true;
    });

    // 5、新增/更新/删除 操作
    const handleCreateClick = () => {
      emit('newBtnClick')
    }

    const handleEditClick = (item: any) => {
      emit('editBtnClick', item)
    }

    const handleDeleteClick = (scope: any) => {
      store.dispatch("system/deletePageTableListAction", {
        pageName: props.pageName,
        id: scope.id,
      });
    }

    return {
      tableData,
      tableCount,
      pageInfo,
      isCreate,
      isUpdate,
      isDelete,
      otherSlots,
      searchTableClick,
      handleCreateClick,
      handleEditClick,
      handleDeleteClick,
    };
  },
});
</script>

<style scoped lang="less"></style>